<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			:root{
				--nav:#a3f;
				--menuBgColor:#aa66ff;
				--subBgColor:#a6f;
				--menuItemWidth:150px;
				--menuItemHeight:50px;
				font-weight: 900;
				--menuItemUnderLine:3px soild #aa55ff;
				--menuItemShowColor:#aa88ff;
			}
			*{
				box-sizing: content-box;
			}
			ul{
				list-style: none;
				padding: 0;
			}
			.menu{
				font-size: 16px;
				display: flex;
				justify-content: center;
				animation: bg-pan-top 8s infinite alternate-reverse both;
				background-color:var(--nav);
				color: #ccc;
			}
			.menu> .menu-item{
				text-align: center;
				line-height: var(--menuItemHeight);
				width: var(--menuItemWidth);
				height: var(--menuItemHeight);
			}
			.submenu{
				opacity: 0;
			}
			.menu>.menu-item{
				background-color: var(--menuBgColor);
				
			}
			.submenu{
				position: absolute;
				display: block;
			}
			.submenu>.menu-item{
				border-bottom: 3px solid transparent;
			}
			.submenu>.menu-item:hover{
				background-color: var(--menuItemShowColor);
				border-bottom: 3px solid var(--menuItemUnderLine);
				animation: jello-horizontal 0.3s both;
			}
			.submenu>*>.submenu{
				margin-left: var(--menuItemWidth);
				margin-top:calc( 0px - var(--menuItemHeight));
			}
			.menu-item:hover>.submenu{
				transition: 1s linear;
				opacity: 1;
				width: var(--menuItemWidth);
				height:var(--menuItemHeight);
				animation: text-pop-up-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
			}
			
			@keyframes text-pop-up-top {
			  0% {
			            transform: translateY(-50%);
			            //transform-origin: 50% 50%;
			    text-shadow: none;
			  }
			  100% {
			        transform: translateY(0);
			        //transform-origin: 50% 50%;
			    //text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
			  }
			}
			@keyframes bg-pan-top {
			  0% {
			    background-position: 50% 100%;
			  }
			  100% {
			    background-position: 50% 0%;
			  }
			}
		</style>
	</head>
	<body>
		<ul class="menu">
			<li class="menu-item">
				<label>首页</label>
				<ul class="submenu">
					<li class="menu-item"><label>首页</label>
						<ul class="submenu">
							<li class="menu-item"><label>我的</label>
							<ul class="submenu">
								<li class="menu-item"><label>首页</label></li>
								<li class="menu-item"><label>首页</label></li>
								<li class="menu-item""><label>首页</label></li>
								<li class="menu-item"><label>首页</label>
								<ul class="submenu">
									<li class="menu-item""><label>首页</label></li>
									<li class="menu-item"><label>首页</label></li>
								</ul>
								</li>
							</ul>
							</li>
							<li class="menu-item"><label>首页</label></li>
						</ul>
					</li>
					<li class="menu-item"><label>首页</label></li>
					<li class="menu-item"><label>首页</label></li>
				</ul>
			</li>
			<li class="menu-item"><label>首页</label></li>
			<li class="menu-item"><label>首页</label></li>
			<li class="menu-item"><label>首页</label></li>
			<li class="menu-item"><label>首页</label>
				<ul class="submenu">
					<li class="menu-item">654</li>
					<li class="menu-item"><label>首页</label>
						<ul class="submenu">
							<li class="menu-item">654</li>
							<li class="menu-item"><label>首页</label></li>
						</ul>
					</li>
				</ul>
			</li>
			<li class="menu-item"><label>首页</label></li>
		</ul>
		<script>
			
		</script>
	</body>
</html>